<template>
  <div id="app_account_list">

    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>账号管理</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-row :gutter="25">
        <el-col :span="4">
          <div class="input-span-wrapper">
            <span>角色名称：</span>
            <el-input placeholder="请输角色名称" clearable v-model="accountName">
            </el-input>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="input-span-wrapper">
            <span>用户类型：</span>
            <el-select v-model="accountType" placeholder="请选择用户类型">
              <el-option label="管理员" value="00"></el-option>
              <el-option label="商户" value="01"></el-option>
              <el-option label="普通用户" value="02"></el-option>
            </el-select>
          </div>
        </el-col>
        <el-col :span="8">
          <div class="input-span-wrapper">
            <span>账号状态：</span>
            <el-select v-model="isDelete" placeholder="请选择账号状态">
              <el-option label="正常" value="0"></el-option>
              <el-option label="已删除" value="1"></el-option>
              <el-option label="被举报" value="2"></el-option>
            </el-select>
            <el-button type="primary" @click="searchAccount" round>查询</el-button>
            <el-button @click="resetInput" round>重置</el-button>
          </div>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="dialogFormVisible=true" class="accountBtn">添加用户</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="warning" @click="updateAllPassword" class="accountBtn">密码重置</el-button>
        </el-col>
      </el-row>


      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
          stripe:true
          border:true>
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="accountId"
            label="编号"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="accountName"
            label="帐号"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="nickName"
            label="昵称"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="email"
            label="邮箱"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="phoneNumber"
            label="手机号码"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="gender"
            label="性别"
            align="center"
            width="60"
            :formatter="statusGender">
        </el-table-column>
        <el-table-column
            prop="avatar"
            label="头像"
            align="center"
            width="120">
          <template slot-scope="scope">
            <el-image
                style="width: 100px; height: 100px"
                :src="img+scope.row.avatar"
                :fit="fit"></el-image>
          </template>
        </el-table-column>
        <el-table-column
            prop="password"
            label="密码"
            align="center"
            width="70">
        </el-table-column>
        <el-table-column
            prop="loginDate"
            label="最后登录时间"
            align="center"
            width="240">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span style="margin-left: 10px">{{ scope.row.loginDate }}</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="accountType"
            label="用户类型"
            align="center"
            width="80"
            :formatter="statusType">
        </el-table-column>
        <el-table-column
            prop="remark"
            label="备注"
            align="center"
            width="80">
        </el-table-column>
        <el-table-column
            prop="isDelete"
            label="帐号状态"
            align="center"
            width="80"
            :formatter="statusFormatter">
        </el-table-column>
        <el-table-column
            label="操作"
            align="center"
        >
          <template slot-scope="scope">
            <div>
              <el-row>
                <el-button type="primary" icon="el-icon-edit" circle
                           @click="handleEdit(scope.$index,scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="toDelete(scope.row)"></el-button>
                <el-button type="warning" icon="el-icon-star-off" circle
                           @click="openGrantDialog(scope.row)"></el-button>
              </el-row>
            </div>
          </template>
        </el-table-column>

      </el-table>
    </el-card>


    <div align="center">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>


    <el-dialog title="用户新增" :visible.sync="dialogFormVisible">
      <el-form :model="form" ref="form" :rules="addRules">
        <el-form-item label="帐号名称" prop="accountName" :label-width="formLabelWidth">
          <el-input v-model="form.accountName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="昵称" prop="nickName" :label-width="formLabelWidth">
          <el-input v-model="form.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
          <el-input v-model="form.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号码" prop="phoneNumber" :label-width="formLabelWidth">
          <el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
          <el-select v-model="form.gender" placeholder="请选择性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型" prop="accountType" :label-width="formLabelWidth">
          <el-select v-model="form.accountType" placeholder="请选择用户类型">
            <el-option label="管理员" value="00"></el-option>
            <el-option label="商户" value="01"></el-option>
            <el-option label="普通用户" value="02"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" prop="avatar" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8090/file/uploadAvatar"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              v-model="form.avatar">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="resetForm">重 置</el-button>
        <el-button type="primary" @click="dialogFormVisible = false; toAddUser(form);">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="用户信息修改" :visible.sync="newDialogFormVisible">
      <el-form :model="newForm" ref="newForm" :rules="rules">
        <el-form-item label="编号" prop="accountId" :label-width="formLabelWidth">
          <el-input v-model="newForm.accountId" autocomplete="off" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户帐号" prop="accountName" :label-width="formLabelWidth">
          <el-input v-model="newForm.accountName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户昵称" prop="nickName" :label-width="formLabelWidth">
          <el-input v-model="newForm.nickName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" :label-width="formLabelWidth">
          <el-input v-model="newForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email" :label-width="formLabelWidth">
          <el-input v-model="newForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phoneNumber" :label-width="formLabelWidth">
          <el-input v-model="newForm.phoneNumber" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender" :label-width="formLabelWidth">
          <el-select v-model="newForm.gender" placeholder="请选择性别">
            <el-option label="男" value="0"></el-option>
            <el-option label="女" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户类型" prop="accountType" :label-width="formLabelWidth">
          <el-select v-model="newForm.accountType" placeholder="请选择用户类型">
            <el-option label="管理员" value="00"></el-option>
            <el-option label="商户" value="01"></el-option>
            <el-option label="普通用户" value="02"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="帐号状态" prop="isDelete" :label-width="formLabelWidth">
          <el-select v-model="newForm.isDelete" placeholder="请选择帐号状态">
            <el-option label="正常" value="0"></el-option>
            <el-option label="已删除" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="头像" prop="avatar" :label-width="formLabelWidth">
          <el-upload
              class="avatar-uploader"
              action="http://localhost:8090/file/uploadAvatar"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              v-model="newForm.avatar">
            <img v-if="imageUrl" :src="imageUrl" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="newDialogFormVisible = false">取 消</el-button>
        <el-button @click="updateResetForm">重 置</el-button>
        <el-button type="primary" @click="newDialogFormVisible = false; toUpdate(newForm);">确 定</el-button>
      </div>
    </el-dialog>

    <!-- =================== 用户授权对话框 ======================== -->
    <el-dialog title="用户授权" :visible.sync="grantDialogVisible" :before-close="handleClose">
      <el-tree
          :data="roleList"
          show-checkbox
          default-expand-all
          node-key="roleId"
          ref="tree"
          :check-strictly="myStrict"
          highlight-current
          :default-checked-keys="defaultChecked"
          :props="defaultProps">
      </el-tree>
      <div slot="footer" class="dialog-footer">
        <el-button @click="grantRoleClose">取 消</el-button>
        <el-button type="primary" @click="doGrantPermission">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {Message} from "element-ui";

export default {
  name: "AccountView",

  data() {
    let checkAccountName = (rule, value, callback) => {
      let url = "/account/checkAccountName/" + value;
      this.$axios.get(url).then(res => {
        if (res.data.code === 200) {
          callback();
        } else {
          this.initAccountList();
          callback(new Error(res.data.message));
        }
      })
    };

    let checkAccountNameAndId = (rule, value, callback) => {
      let params1 = this.newForm.accountId;
      let params2 = this.newForm.accountName;
      let url = "/account/checkAccountNameAndId/" + params1 + "/" + params2;
      this.$axios.get(url).then(res => {
        if (res.data.code === 200) {
          callback();
        } else {
          this.initAccountList();
          callback(new Error(res.data.message));
        }
      }).catch(error => {
        callback(error);
      });
    };

    return {
      img: "http://localhost:8088/image/Test/",
      imageUrl: '',
      fit: 'contain',
      accountName: '',
      isDelete: null,
      accountType: null,
      isSearching: false,
      pageNum: 1,
      pageSize: 5,
      total: 100,

      tableData: [
        {isDelete: 0},
        {isDelete: 1}
      ],
      multipleSelection: [],

      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        accountName: '',
        password: '',
        nickName: '',
        email: '',
        phoneNumber: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        gender: '',
        avatar: '',
        accountType: '',
      },
      formLabelWidth: '120px',
      newDialogFormVisible: false,
      newForm: {
        accountName: '',
        password: '',
        nickName: '',
        email: '',
        phoneNumber: '',
        isDelete: '',
        gender: '',
        delivery: false,
        type: [],
        resource: '',
        desc: '',
        accountType: '',
        avatar: '',
      },
      addRules: {
        accountName: [
          {required: true, message: '请输入帐号名称', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'},
          {validator: checkAccountName, trigger: 'blur'},
        ],
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '手机的长度为11位'},
          {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur'}
        ],
      },
      rules: {
        accountName: [
          {required: true, message: '请输入帐号名称', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'},
          {validator: checkAccountNameAndId, trigger: 'blur'},
        ],
        nickName: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur'}
        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur'}
        ],
        phoneNumber: [
          {required: true, message: '请输入手机号码', trigger: 'blur'},
          {min: 11, max: 11, message: '手机的长度为11位'},
          {pattern: /^1[3456789]\d{9}$/, message: '请输入正确的手机号码格式', trigger: 'blur'}
        ],
      },

      // 授权需要的相关数据
      accountId: "",
      grantDialogVisible: false,    // 用户授权对话框
      roleList: [],
      defaultProps: {
        label: "roleName",
      },
      myStrict: false,            //是否使用严格模式
      defaultChecked: []          //默认勾选中的权限
    }


  }
  ,
  created() {
    this.initAccountList();
    this.getAllRoleList();
  }
  ,

  methods: {
    // 分页查询 包括一开始的显示 和 模糊查询
    getAccountList(url, params) {
      this.$axios.get(url, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          ...params
        }
      }).then((res) => {
        if (res.data.code === 200) {
          this.tableData = res.data.data.list;
          this.total = res.data.data.total;
          this.pageNum = res.data.data.pageNum;
          this.pageSize = res.data.data.pageSize;
        }
      })
    }
    ,

    initAccountList() {
      let url = "/account/showAccountByPage";
      this.getAccountList(url, {});
    }
    ,

    searchAccount() {
      let url = "/account/findAccountLikeName";
      this.getAccountList(url, {accountName: this.accountName, isDelete: this.isDelete, accountType: this.accountType})
      this.isSearching = true;
    }
    ,

    handleSizeChange(val) {
      this.pageSize = val;
      if (this.isSearching) {
        this.searchAccount();
      } else {
        this.initAccountList();
      }
    }
    ,

    handleCurrentChange(val) {
      this.pageNum = val;
      if (this.isSearching) {
        this.searchAccount();
      } else {
        this.initAccountList();
      }
    }
    ,

    //新增用户--------------------------------------------------------
    toAddUser(form) {
      this.imageUrl = this.form.avatar
      this.$refs['form'].validate(valid => {
        if (valid) {
          let url = "/account/addAccount";
          let params = new URLSearchParams();
          params.append("accountName", form.accountName);
          params.append("password", form.password);
          params.append("nickName", form.nickName);
          params.append("email", form.email);
          params.append("phoneNumber", form.phoneNumber);
          params.append("gender", form.gender);
          params.append("avatar", form.avatar);
          params.append("accountType", form.accountType);
          console.log(params);
          this.$axios.post(url, params)
              .then((res) => {
                console.log(res);
                if (res.data.code === 200) {
                  Message({
                    type: 'success',
                    message: res.data.message,
                    duration: 1000
                  })
                  this.dialogFormVisible = false;
                  this.initAccountList();
                } else {
                  Message({
                    type: 'error',
                    message: res.data.message,
                    duration: 1000
                  })
                }
              });
        }
      })
    }
    ,

    // 修改用户--------------------------------------------------------
    toUpdate(newForm) {
      this.$refs['newForm'].validate(valid => {
        if (valid) {
          let url = "/account/updateAccount";
          let params = new URLSearchParams();
          params.append("accountId", newForm.accountId);
          params.append("accountName", newForm.accountName);
          params.append("nickName", newForm.nickName);
          params.append("email", newForm.email);
          params.append("phoneNumber", newForm.phoneNumber);
          params.append("password", newForm.password);
          params.append("isDelete", newForm.isDelete);
          params.append("gender", newForm.gender);
          params.append("avatar", newForm.avatar);
          params.append("accountType", newForm.accountType);
          console.log(newForm.avatar);
          this.$axios.put(url, params)
              .then((res) => {
                console.log(res);
                if (res.data.code === 200) {
                  Message({
                    type: 'success',
                    message: res.data.message,
                    duration: 1000
                  })
                  this.dialogFormVisible = false;
                  this.searchAccount();
                } else {
                  Message({
                    type: 'error',
                    message: res.data.message,
                    duration: 1000
                  })
                }
              });
        }
      })
    }
    ,
    //删除用户 逻辑删除------------------------------------------------
    toDelete(row) {
      let url = "/account/changeAccountIsDeleted";
      let params = new URLSearchParams();
      params.append("accountId", row.accountId);
      console.log(params);
      this.$axios.put(url, params)
          .then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              Message({
                type: 'success',
                message: res.data.message,
                duration: 1000
              })
              this.searchAccount();
            } else {
              Message({
                type: 'error',
                message: res.data.message,
                duration: 1000
              })
            }
          });
    }
    ,

    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    }
    ,
    handleSelectionChange(val) {
      this.multipleSelection = val;
    }
    ,

    //批量修改密码--------------------------------------------------------
    updateAllPassword() {
      let ids = [];
      for (const sel of this.multipleSelection) {
        ids.push(sel.accountId);//将每个id添加到数组中
      }
      let url = "/account/updatePasswordByIds";
      this.$axios.get(url, {
        params: {
          ids: ids.join(","),
        }
      }).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          Message({
            type: 'success',
            message: res.data.message,
            duration: 1000
          })
          this.searchAccount();
          this.multipleSelection = [];
        } else {
          Message({
            type: 'error',
            message: res.data.message,
            duration: 1000
          })
        }
      })
    }
    ,

    //数据回显--------------------------------------------------------
    handleEdit(index, row) {
      this.newDialogFormVisible = true;
      this.newForm.accountId = row.accountId;
      this.newForm.accountName = row.accountName;
      this.newForm.nickName = row.nickName;
      this.newForm.email = row.email;
      this.newForm.phoneNumber = row.phoneNumber;
      this.newForm.isDelete = row.isDelete === 0 ? '0' : '1';
      this.newForm.gender = row.gender === 0 ? '0' : '1';
      this.newForm.accountType = row.accountType;
      this.newForm.password = row.password;
      this.newForm.avatar = row.avatar;
      this.imageUrl = this.img + row.avatar;
      console.log("+++++++++++" + this.newForm.avatar);
    },

    statusFormatter(row, column, cellValue) {
      if (cellValue === 0) {
        return '正常';
      } else if (cellValue === 1) {
        return '已删除';
      } else {
        return '被举报';
      }
    },
    statusType(row, column, cellValue) {
      if (cellValue === "00") {
        return '管理员';
      } else if (cellValue === "01") {
        return '商户';
      } else if (cellValue === "02") {
        return '普通用户';
      }
    },

    statusGender(row, column, cellValue) {
      if (cellValue === 0) {
        return '男';
      } else if (cellValue === 1) {
        return '女';
      } else {
        return '未知';
      }
    }
    ,
    //重置表单--------------------------------------------------
    resetForm() {
      this.$refs['form'].resetFields();
    },

    updateResetForm() {
      this.$refs['newForm'].resetFields();
    },

    resetInput() {
      this.accountName = '';
      this.accountType = null;
      this.isDelete = '';
    },
    //头像上传------------------------------------------------
    handleAvatarSuccess(res) {
      console.log(res)
      this.imageUrl = this.img + res;
      console.log(this.imageUrl);
      this.form.avatar = res;
      this.newForm.avatar = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },

    //获取所有的角色信息
    getAllRoleList() {
      let url = "/account/getAllRoles"
      this.$axios.get(url).then((res) => {
        if (res.data.code === 200) {
          this.roleList = res.data.data;
          console.roleList
        }
      })
    },
    //打开授权的模态框--------------------------------
    openGrantDialog(row) {
      // 打开窗口，回显示数据，要勾选父级时不会选中所有的子级，所以需要严格模式
      this.myStrict = true;
      // 显示对话框
      this.grantDialogVisible = true;
      this.accountId = row.accountId;

      let url = "/account/getRoleById/" + this.accountId;
      this.$axios.get(url).then(res => {
        if (res.data.code === 200) {
          this.defaultChecked = res.data.data
          //数据显示完之后不需要严格模式
          this.myStrict = false;
        }
      })
    }
    ,
    //点击叉号关闭授权模态框
    handleClose() {
      this.grantRoleClose();
      this.$refs.tree.setCheckedKeys([]);
    }
    ,
    // 关闭授权窗口--------------------------------
    grantRoleClose() {
      this.grantDialogVisible = false;
      this.$refs.tree.setCheckedKeys([]);
    }
    ,
    // 点击确定按钮--------------------------------
    doGrantPermission() {
      //得到全选的id
      let checkedKeys = this.$refs.tree.getCheckedKeys();
      let roleIds = [];
      for (let i = 0; i < checkedKeys.length; i++) {
        roleIds.push(checkedKeys[i]);
      }

      let url = "/account/grantRoleByAccountId";
      let params = new URLSearchParams();
      params.append("accountId", this.accountId);
      params.append("ids", roleIds.join(","));
      console.log(params);
      this.$axios.put(url, params).then(res => {
        console.log(res);
        if (res.data.code === 200) {
          Message({
            type: 'success',
            message: res.data.message,
            duration: 1000
          })
        } else {
          Message({
            type: 'error',
            message: res.data.message,
            duration: 1000
          })
        }
      })
      this.grantDialogVisible = false;
    }
  },
};
</script>
<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.input-span-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

/* From www.lingdaima.com */
.accountBtn {
  padding: 0.9em 1.9em;
  font-size: 16px;
  border: none;
  background: #6285f8;
  color: white;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.accountBtn:hover {
  color: rgb(255, 255, 255);
}

.accountBtn::before, .accountBtn::after {
  content: "";
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background: rgba(128, 128, 128, 0.096);
  backdrop-filter: blur(10px);
  z-index: -1;
  transition: all 0.4s;
}

.accountBtn::after {
  z-index: -2;
  transition: all 0.4s;
}

.accountBtn:hover::before {
  background: rgb(0, 0, 0, 0.315);
  border-radius: 10px;
}

.accountBtn:hover::after {
  background: linear-gradient(to right, #cb6ce6, #38b6ff);
  border-radius: 10px;
  transform: scale(1.07, 1.2) rotateX(180deg);
}
</style>
